<template>
  <div>
    <div class="head">
      <span class="name"
        >{{ t("快递公司名称") + ":" }}{{ order_trcks.com }}</span
      >
      <span class="number">{{ t("快递单号") + ":" }}{{ order_trcks.nu }}</span>
    </div>
    <!-- info: https://www.cnblogs.com/BillyYoung/p/14690912.html -->
    <el-timeline class="timeline">
      <el-timeline-item
        v-for="(item, index) in order_trcks.data"
        :key="index"
        type="primary"
        color="#FF5757"
        placement="top"
        :timestamp="item.status"
      >
        <div class="year">{{ item.ftime }}</div>
        {{ item.context }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import { getOrderExpressRes } from "@/utils/api";
export default {
  props: {
    goods: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      order_trcks: null,
    };
  },
  mounted() {
    if (this.goods) {
      getOrderExpressRes({
        order_id: this.goods.id,
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          if (res.data.status == 200) {
            this.order_trcks = res.data;
          } else {
            this.$message.error(res.data.message);
          }
        }
      });
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的订单.${v}`);
    },
  },
};
</script>
<style lang="less" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  .name {
    font-weight: 400;
    font-size: 18px;
    color: #000000;
  }
  .number {
    font-weight: 400;
    font-size: 18px;
    color: #000000;
  }
}

.timeline {
  margin-top: 30px;
  /deep/ .el-timeline-item {
    margin-left: 150px;
  }

  /deep/ .el-timeline-item__tail {
    border-color: #ff5757;
  }

  .year {
    color: #333;
    position: absolute;
    left: -150px;
    top: 0px;
    right: 101%;
    text-align: right;
  }

  .item {
    color: #ffffff;
    border-left: 2px solid #fff;
    margin-left: 25px;
    font-size: 15px;

    span {
      padding-left: 10px;
    }
  }
}
</style>
